﻿@model IEnumerable<Ja.Mvc.Acdf.Models.PhotoViewModel>

@section scripts {
    @*@Scripts.Render("~/bundles/elastislide")*@
    @Scripts.Render("~/bundles/fancybox")
    @Scripts.Render("~/bundles/flexslider")

    <script type="text/javascript">
        $(".fancybox").fancybox({
            helpers: {
                title: {
                    type: 'float',
                },
            },
            openEffect: 'none',
            closeEffect: 'elastic',
            nextEffect: 'fade',
            prevEffect: 'fade',
        });

        $(window).load(function () {

            // The slider being synced must be initialized first
            $('#carousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 100,
                itemMargin: 5,
                asNavFor: '#slider',
                prevText: "", //String: Set the text for the "previous" directionNav item
                nextText: "", //String: Set the text for the "next" directionNav item
            });

            $('#slider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: "#carousel",
                prevText: "", //String: Set the text for the "previous" directionNav item
                nextText: "", //String: Set the text for the "next" directionNav item
                smoothHeight: true,
                //after: function () {
                //    alert($("#description").text());
                //    //$("p#pDescription").text() = this.valueOf("p#description");
                //},
                after: function (slider) {
                    //var bla = $('div.panel-footer').children('p.essai').text();
                    ////alert(bla);
                    curSlide = slider.slides[slider.currentSlide];
                    var b = $(curSlide).find('p.toshow').text();
                    //alert(b);
                    $('div.tofill').text(b);
                },
                start: function (slider) {
                    curSlide = slider.slides[slider.currentSlide];
                    var b = $(curSlide).find('p.toshow').text();
                    $('div.tofill').text(b);
                }
            });
            $('#loading').hide();
        });
    </script>

    @*<noscript>
            <style>
                .es-carousel ul {
                    display: block;
                }
            </style>
        </noscript>
        <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">

            <div class="rg-image-wrapper">
                {{if itemsCount > 1}}
                <div class="rg-image-nav">
                    <a href="#" class="rg-image-nav-prev">Previous Image</a>
                    <a href="#" class="rg-image-nav-next">Next Image</a>
                </div>
                {{/if}}
                <div class="rg-image"></div>
                <div class="rg-loading"></div>
                <div class="rg-caption-wrapper">
                    <div class="rg-caption" style="display:none;">
                        <p></p>
                    </div>
                </div>
            </div>
        </script>*@
}

@{
    ViewBag.Title = "Photos";
}

@if (ViewBag.SubCatId == 33)
{
    <h2>@ViewBag.Title @Html.DisplayFor(model => model.First().CategoryName) : <span class="badge">@ViewBag.Count photos</span> </h2>
    <div class="btn-group">
        <span class="btn btn-default navbar-btn">@Html.ActionLink("Back to Categories", "Category")</span>
        <span class="btn btn-default navbar-btn">@Html.ActionLink("Add new photo in " + @Html.DisplayFor(model => model.First().CategoryName), "Create", new { catId = @ViewBag.CatId, subCatId = @ViewBag.SubCatId })</span>
    </div>
}
else
{
    <h2>@ViewBag.Title @Html.DisplayFor(model => model.First().CategoryName) / @Html.DisplayFor(model => model.First().SubCategoryName) : <span class="badge">@ViewBag.Count photos</span></h2>
    <div>
        <span class="btn btn-default">@Html.ActionLink("Back to Categories", "Category")</span>
        <span class="btn btn-default">@Html.ActionLink("Add new photo in " + @Html.DisplayFor(model => model.First().CategoryName) + " - " + @Html.DisplayFor(model => model.First().SubCategoryName), "Create", new { catId = @ViewBag.CatId, subCatId = @ViewBag.SubCatId })</span>
    </div>
}

<!-- container -->
<div class="container">

    <div class="row">
        <div class="col-lg-6 col-sm-6">
            <div class="well well-sm">
                <h6>Sélectionnez une période: [ <em>0000-0000 = non classées</em> ]</h6>
                @foreach (var item in ViewBag.Periodes)
                {
                    string[] v = Request.Url.AbsoluteUri.Split('&');
                    string val = v[0] + "&" + v[1] + "&periode=" + item;
                    <a href=@val>@item</a>  ;
                }
            </div>
            @*<div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3>Category: @Html.DisplayFor(model => model.First().CategoryName)</h3>
                    </div>
                    <div class="panel-body">
                        <p></p>
                    </div>
                    <div class="panel-footer">
                        <p class="essai">Subcategory: @Html.DisplayFor(model => model.First().SubCategoryName)</p>
                    </div>
                </div>*@

            <div class="tofill well well-sm">
                <div id="loading" style="text-align:center"><img src="~/Content/fancybox/fancybox_loading.gif" /></div>
                <p></p>
            </div>

            <div class="flex-container flex-viewport">
                <div id="carousel" class="flexslider">
                    <ul class="slides">
                        @foreach (var item in Model)
                        {
                            <li>
                                <img class="img-thumbnail" src="@item.Path" />
                                <p class="flex-caption-thumbnail" style="font-size:xx-small"> @item.PhotoId</p>
                            </li>
                        }
                    </ul>
                </div>

                <div id="slider" class="flexslider">
                    @*<div id="loading" style="text-align:center"><img src="~/Content/fancybox/fancybox_loading.gif" /></div>*@
                    <ul class="slides">
                        @foreach (var item in Model)
                        {
                            <li>

                                @{string myTitle = "N° " + item.PhotoId + " / " + item.SchoolPeriod + " / " + item.Place;}
                                <a class="fancybox" title="@myTitle" href="@item.Path"><img src="@item.Path" /></a>
                                <p class="flex-caption"> @myTitle</p>
                                <p hidden class="toshow">@item.Description</p>
                                <div class="btn-group-justified hidden-xs hidden-sm" style="padding:5px; border:1px solid; border-color:#f8f8f8">
                                    @Html.ActionLink("Edit", "Edit", new { id = item.PhotoId }, new { type = "button", @class = "btn btn-xs btn-primary" })
                                    @Html.ActionLink("Details", "Details", new { id = item.PhotoId }, new { type = "button", @class = "btn btn-xs" })
                                    @Html.ActionLink("Delete", "Delete", new { id = item.PhotoId }, new { type = "button", @class = "btn btn-xs btn-danger" })
                                </div>
                            </li>
                                    }
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <div>
        <span class="btn btn-default">@Html.ActionLink("Back to Categories", "Category")</span>
    </div>
</div><!-- container -->
@*<div id="rg-gallery" class="rg-gallery">
        <div class="rg-thumbs">
            <!-- Elastislide Carousel Thumbnail Viewer -->
            <div class="es-carousel-wrapper">
                <div class="es-nav">
                    <span class="es-nav-prev">Previous</span>
                    <span class="es-nav-next">Next</span>
                </div>
                <div class="es-carousel">
                    <ul>
                        @foreach (var item in Model)
                        {
                            <li>
                                <a href="#"><img src="@item.ThumbPath" data-large="@item.Path" alt="@item.Place" data-description="@item.Description" /></a>
                            </li>
                        }
                    </ul>
                </div>
            </div>
            <!-- End Elastislide Carousel Thumbnail Viewer -->
        </div><!-- rg-thumbs -->
    </div><!-- rg-gallery -->*@


